<div class='left'>
  <div class="title">List of the translations</div>
  <div class="mb">
    <div class="left"><button ng-click="edit('')">Add a new phrase</button></div>
    <div class="left">
      <select ng-model="lang" ng-change="updateLang()"
              ng-options="code as language.name for (code, language) in languages">
      </select>
    </div>
    <div class="right">Filter: <input type="text" ng-model="search" class="search-query" 
                                                  placeholder="Filter" /></div>
  </div>
  <table id="table">
    <tr>
      <th>Key</th>
      <th>Group</th>
      <th>{{languages['de'].germanName}}</th>
      <th ng-if="lang != 'de'">{{languages[lang].germanName}}</th>
      <th>is tag?</th>
      <th><img src="icons/trash.svg" width=16 height=16 title='Delete'"></th>
    </tr>
    <tr class="hover" ng-repeat="p in de_phrases | filter: p_filter(search) | orderBy: 'group'" 
                      ng-click="edit(p.key)">
      <td>{{p.key}}</td>
      <td>{{p.group}}</td>
      <td>{{p.phrase}}</td>
      <td ng-if="lang != 'de'">{{getPhraseForKey(p.key)}}</td>
      <td ng-switch="p.isTag">
        <span ng-switch-when=true>&#10003;</span>
        <span ng-switch-when=false>&#10007;</span>
      </td>
      <td class="red-hover" ng-click="remove(t.email); $event.stopPropagation()">
        <img src="icons/trash.svg" width=16 height=16 title='Delete'>
      </td>
    </tr>
  </table>
</div>